<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="0" @onSubmit="onSubmit">
           <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入商品名称" v-model.trim="search.title" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getAuditGoodsPeopleList(0)">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption(0)">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="categoryName" label="商品分类">
            </el-table-column>
            <el-table-column prop="brandName" label="品牌"></el-table-column>
            <el-table-column prop="supplierName" label="供应商"></el-table-column>
            <el-table-column prop="taxNumber" label="税码">
              <template slot-scope="scope">
                <span v-if="scope.row.taxNumber">{{scope.row.taxNumber}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope">
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(3, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">查看</button> -->
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(0, scope.row)">查看</button>
            </template>
            </el-table-column>
           </el-table>
           <div class="text-center">
             <br/>
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
      <el-tab-pane label="历史审核" name="1" @onSubmit="onSubmit">
          <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入商品名称" v-model.trim="search.title" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="请选择审核状态" v-model.trim="search.status" clearable>
                      <el-option :label="'通过'" :value="2">通过</el-option>
                      <el-option :label="'驳回'" :value="3">驳回</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getAuditGoodsPeopleList(1)">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption(1)">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe  :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="categoryName" label="商品分类">
            </el-table-column>
            <el-table-column prop="brandName" label="品牌"></el-table-column>
            <el-table-column prop="supplierName" label="供应商"></el-table-column>
            <el-table-column prop="taxNumber" label="税码"></el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column prop="status" label="审核状态">
              <template slot-scope="scope">
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(3, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">查看</button> -->
                <span v-if="scope.row.auditStatus == 2">通过</span>
                <span v-else>驳回</span>
            </template>
            </el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope">
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="LookOption(scope.row)">查看</button>
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="getHistory(scope.row)">审核记录</button>
                <button class="my-btn my-btn--mini my-btn--primary plain" v-if="scope.row.auditStatus == 2" @click="EditOption(scope.row)">更改税码</button>
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" v-else @click="RejectOption(scope.row)">驳回原因</button> -->
            </template>
            </el-table-column>
           </el-table>

           <div class="text-center">
             <br/>
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
    </el-tabs>
    </div>
    <!-- 驳回原因的弹框 -->
    <el-dialog :visible.sync="rejectShow" append-to-body :destroy-on-close="true" title="驳回">
        <el-form>
            <el-form-item label="原因" >
              <el-input type="textarea" v-model="remark" :rows="5" maxlength="200" show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button @click="cancelModel()">取 消</el-button> -->
          <el-button type="primary" @click="closeModel()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 历史审核的弹框 -->
    <el-dialog title="审核记录" :visible.sync="isShowHistory" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" width="600px" destroy-on-close >
      <el-form :label-width="'7em'">
        <el-form-item v-if="historyList.length">
          <div style="height: 300px;" >
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in historyList"
                :key="index">
                {{item.creatorName}}:  {{item.createTime}}
                <div>
                <span v-if="item.status == 1">审核通过</span>
                <p v-else class="showClass">审核驳回: {{item.remark}}</p>
                </div>
                <el-button size="mini" @click="lookRecords(item)">查看</el-button>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-form-item>
        <el-form-item v-else>
          <span>暂无审核记录</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handelCancleHistory()">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 历史审核变更记录详情的弹框（sku） -->
    <el-dialog :visible.sync="historyChangeMode" append-to-body :destroy-on-close="true" title="查看" width="70%">
        <div class="padding_15">
        <el-table :data="skuList" stripe :header-cell-style="tableHeaderStyle">
          <el-table-column prop="skuNo" label="SKU编码"> </el-table-column>
          <el-table-column prop="imgUrl" label="SKU图片">
            <template slot-scope="scope">
              <el-image class="shop_avator_sku" :src="imgBaseUrl + scope.row.imgUrl" :preview-src-list="[imgBaseUrl + scope.row.imgUrl]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="propertyRelationsList" label="属性">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.propertyRelationsList" :key="index">{{ item.property }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="propertyRelationsList" label="属性值">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.propertyRelationsList" :key="index">{{ item.propertyValue }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="skuCostPrice" label="价格类型">
            <template slot-scope="scope">
              <div>{{ scope.row.skuCostPrice.name }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="changePriceList" label="原价格">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.changePriceList" :key="index">
                <span v-if="item.value || item.value == 0">{{ item.priceName }}:{{ item.value }}</span>
                <span v-else>{{ item.priceName }}:--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="skuCostPrice" label="价格">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.skuCostPrice.children" :key="index">
                <span v-if="item.value">{{ item.priceName }}:{{ item.value }}</span>
                <span v-else>{{ item.priceName }}:--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="qty" label="库存"></el-table-column>
           <!-- <el-table-column prop="sizeType" label="尺码模板">
            <template slot-scope="scope">
              <div>{{ scope.row.sizeType.length?scope.row.sizeType[0].title : '无' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="sizeList" label="尺码数据">
            <template slot-scope="scope" >
              <div v-if="scope.row.sizeList.length>0">
              <div v-for="(item, index) in scope.row.sizeList" :key="index">
                {{ item.sizeName }}:{{ item.value?item.value: '无' }}
              </div>
              </div>
              <div v-else>无</div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModel()">取 消</el-button>
          <el-button type="primary" @click="closeModel()">确 定</el-button>
        </div> -->
      </el-dialog>
     <look-detail :visible.sync="isShowDetailMode" :goodsId="id" :taskId="taskId" :updateType="type" @update="getAuditGoodsPeopleList(Number(activeName))"></look-detail>
     <edit-rate :visible.sync="isShowMode" :goodsId="id" :taskId="taskId" @update="getAuditGoodsPeopleList(Number(activeName))"></edit-rate>
    </div>
</template>

<script>
import Setting from '@/settings'
import EditRate from '../components/editRate'
import LookDetail from '../components/lookDetail'
import { GetAuditGoodsPeopleList, GetHistoryDetails,GetHistoryChangeDetails } from '@/views/audit-center/services/index'
import { GetAllStorePriceModel, GetSizeListCopy, GetStoreAttrListAllByParams } from '@/views/store-management/services/index'
import * as defaultColor from '@/views/store-management/services/defaultColor'
  export default {
    name: 'setting',
    components: {
      EditRate,
      LookDetail
    },
    data() {
      return {
        activeName: '0',
        param:{},
        pageIndex: 1,
        imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
        baseUrl: process.env.VUE_APP_FILE_URL + '/',
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,
        pageData: [],
        pageDataed: [],
        pageCount: 0,
        loading: false,
        search: {
            title: '',
            status: null
        },
        isShowMode: false,
        isShowDetailMode: false,
        id: '',
        taskId: '',
        type: 0,
        rejectShow: false,
        remark: '', //驳回原因备注
        isShowHistory: false,
        historyList: [],
        historyChangeList: [], //审核变更记录列表
        historyChangeMode: false,
        priceTypeList: [], //价格模板
        skuList: [],
        sizeTypeList: [], //尺码模板
        allAttrList: [],// 属性模板
        changePriceList: [{
              priceName: "采购价",
              fieldName: "costPrice",
              value: null
          },
          {
              priceName: "B端销售价",
              fieldName: "supplyPrice",
              value: null
          },
          {
              priceName: "最低售价",
              fieldName: "minPrice",
              value: null
          },
          {
              priceName: "市场价",
              fieldName: "marketPrice",
              value: null
          },
          {
              priceName: "C端售价",
              fieldName: "suggestedPrice",
              value: null
          },
          ],
          changePrice: false,
        priceObj:{
        'costPrice':'beforeCostPrice',
        'supplyPrice':'beforeSupplyPrice',
        'minPrice':'beforeMinPrice',
        'suggestedPrice':'beforeSuggestedPrice',
        'marketPrice':'beforeMarketPrice'
        }
        // title: '商品审核'
      }
    },
    created() {
      this.getAuditGoodsPeopleList(0)
      this.getAllPrice()
      this.getStoreAttrList()
      this.getSizeModelList()
    },
    methods:{
      getHistory(data){
        this.isShowHistory = true
         GetHistoryDetails({
           targetId: data.goodsId
         }).then(res =>{
           if(res.code == 200) {
             if(res.data) {
             this.historyList = res.data;
             }
           }
         })
      },
      lookRecords(item) {
        this.historyChangeList = []
        this.skuList = []
        GetHistoryChangeDetails({
          instanceId: item.instanceId
        })
        .then(res =>{
          if(res.code == 200){
            this.historyChangeList = res.data.updRecordList.length !=0?res.data.updRecordList : []
            this.historyChangeMode = true
            if (this.historyChangeList && this.historyChangeList.length) {
              this.skuList = this.historyChangeList.map(item => {
              let skuType = this.priceTypeList.find(child => child.value == item.priceTemplateId)
              if (!skuType) {
                skuType = this.priceTypeList[0]
              }
              const newskuType = JSON.parse(JSON.stringify(skuType))

              item.skuCostPrice = newskuType
              let list =[]
               item.skuCostPrice.children.forEach(childItem => {
                  if(item.beforeCostPrice == null && item.beforeMarketPrice == null && item.beforeMinPrice == null && item.beforeSuggestedPrice == null && item.beforeSupplyPrice == null) {
                   childItem.value = item[childItem.fieldName]
                     list.push(childItem)
                  }
                 else{
                   childItem.value = item[childItem.fieldName]
                     list.push(childItem)
                 }
              })
               item.skuCostPrice.children =[...list]

              // item.skuCostPrice.children.forEach(childItem => {
              //   childItem.value = item[childItem.fieldName]
              // })
              item.modelColor = item.modelColorId ? defaultColor.ColorList.find(color => color.id == item.modelColorId).name : '无';

              // if(item.beforeCostPrice == null && item.beforeMarketPrice == null && item.beforeMinPrice == null && item.beforeSuggestedPrice == null && item.beforeSupplyPrice == null) {
              //   this.changePrice = false
              // }else {
              //   this.changePrice = true
                   this.changePriceList[0].value = item.beforeCostPrice
                   this.changePriceList[3].value = item.beforeMarketPrice
                   this.changePriceList[2].value = item.beforeMinPrice
                   this.changePriceList[4].value = item.beforeSuggestedPrice
                   this.changePriceList[1].value = item.beforeSupplyPrice
                item.changePriceList = this.changePriceList
              // }
              return JSON.parse(JSON.stringify(item))
            })
            }
            // console.log('hsryhwerliqgwdicfhud',this.skuList )
          }
        })
      },
      // 获取尺码模板(不分页)
    getSizeModelList() {
       GetSizeListCopy({
         status: 1,
         search: '',
         sort: true,
        //  sortField: ''
       }).then(res=> {
         if(res.code == 200) {
           this.sizeTypeList = res.data
         }
       }).catch(err =>{
         console.log(err)
       })
    },

    // 获取全部属性
    getStoreAttrList() {
      const loader = this.$loading({
        lock: true,
        fullscreen: true
      });
      GetStoreAttrListAllByParams()
      .finally(() => loader.close())
      .then(data => {
        this.allAttrList = data.data.map(item => {
          return {
            sort: item.sort,
            status: item.status,
            propertyId: item.id,
            propertyName: item.propertyName,
            propertyCode: item.propertyNo
          };
        });
      })
    },
      //获取所有的价格模板
    getAllPrice() {
      GetAllStorePriceModel()
        .then(data => {
          if (data.code == 200) {
            this.priceTypeList = data.data.map(item => {
              return {
                name: item.name,
                value: item.id,
                children: JSON.parse(item.selectionPrice.replace(/'/g, '"')).map(childItem => {
                  return {
                    priceName: childItem.priceName,
                    fieldName: childItem.fieldName,
                    remark: childItem.remark,
                    value: 0,
                  }
                }),
              }
            })
          }
        })
    },
      handelCancleHistory() {
         this.isShowHistory = false
      },
      addOrEditOption(type, data) {

         this.id = data.id
         this.taskId = data.taskId
         if(type == 0) {
           this.title = '绑定税码'
         }else {
           this.title = '更改税码'
         }
         this.isShowMode = true
      },
      // 查看详情
      LookOption(data) {
        this.type = 0
         this.id = data.id
         this.taskId = data.taskId
         this.isShowDetailMode = true
      },
      EditOption(data) {
         this.type = 1
         this.id = data.id
         this.taskId = data.goodsId  //商品id
         this.isShowDetailMode = true
      },
      RejectOption(data) {
         this.type = 2
         this.rejectShow = true
         this.remark = data.remark
      },
      // 点击确定按钮隐藏弹框
      closeModel() {
        this.rejectShow = false
        this.remark = ''
      },
      handleClick(tab, event) {
        this.activeName = tab.name
        this.search.title = ''
        this.pageIndex = 1
        this.getAuditGoodsPeopleList(Number(tab.name))
      },
      resetOption(tab) {
        this.search.title = ''
        this.search.status = null
        this.pageIndex = 1
        this.getAuditGoodsPeopleList(tab)
      },
      getAuditGoodsPeopleList(type){
         this.id =null
        GetAuditGoodsPeopleList({
          type: type,
          status: this.search.status,
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          title: this.search.title
        }).then(res=>{
          if(res.code  == 200){
            this.pageData = res.data.list
            this.pageCount = res.data.total
            if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1;
              this.getAuditGoodsPeopleList(Number(this.activeName));
            }
          }
        })
      },
        // 分页操作
    handlePagingChange(event) {
      this.pageIndex = event
      this.getAuditGoodsPeopleList(Number(this.activeName))
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getAuditGoodsPeopleList(Number(this.activeName))
    },
      onSubmit(val){
        val.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        saveShareSettings(val).then(res=>{
          if(res.code  == 200){
            this.$message("保存成功")
            this.getShareSettings()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
 .container_box{
    background-color: #f2f2f7;
    height: 100vh;
    margin: 15px 25px;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  .tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333333;
    background-color: #FFFFFF;
    padding:0 20px;
    margin-top: 20px;

    p {
      width: 100px;
      text-align: center;
      font-size: 18px;
    }

    .active {
      font-weight: bold;
    }
  }
  }
 .showClass {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
 }
</style>
